﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>村落推荐</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!--标准mui.css-->
    <link rel="stylesheet" href="/css/mui.css">
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        h5 {
            padding-top: 8px;
            padding-bottom: 8px;
            text-indent: 12px;
        }

        .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
            font-size: 15px;
            margin-top: 8px;
            color: #333;
        }

        .green {
            color: #66FFCC;
        }
    </style>
</head>

<body>

    <div class="mui-content" style="background-color:#fff">
        <p id="headContent" class="bg-primary" style="padding-left:5%;padding-top:5px;font-size:large;height:30px">请选择地区：</p>
        <ul class="mui-table-view mui-grid-view">
            <li class="mui-table-view-cell mui-media mui-col-xs-6" onClick="choose('c1')">
                <img id="m1" class="mui-media-object" src="/images/琼东.jpg">
                <div id="c1" style="font-family:Muiicons">琼东</div>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-6" onClick="choose('c2')">
                <img id="m2" class="mui-media-object" src="/images/琼西.jpg">
                <div id="c2" style="font-family:Muiicons">琼西</div>
            </li>
             
            <li class="mui-table-view-cell mui-media mui-col-xs-6" onClick="choose('c3')">
                <img id="m3" class="mui-media-object" src="/images/琼北.jpg"/>
                <div id="c3" class="" style="font-family:Muiicons;">琼北</div>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-6" onClick="choose('c4')">
                <img id="m4" class="mui-media-object" src="/images/琼南.jpg">
                <div id="c4" class="" style="font-family:Muiicons">琼南</div>
            </li>

            <li class="mui-table-view-cell mui-media mui-col-xs-6" onClick="choose('c5')">
                <img id="m5" class="mui-media-object" src="/images/琼中.jpg">
                <div id="c5" style="font-family:Muiicons" >琼中</div>
            </li>
        </ul>
        <div class="mui-content-padded">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-block" onClick="btnClick()">确认选择</button>
        </div>
    </div>



    <div class= "modal fade" id = "mymodal" tabindex = "-1" role = "dialog" aria - labelledby="myModalLabel" data-backdrop="static" data-keyboard="false" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                @*<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>*@
                <h4 class="modal-title" id="myModalLabel">推荐结果</h4>
            </div>
            <div class="modal-body">

                <div class="row" style="margin:5px">
                        <div class="thumbnail">
                            <img id="recommendImg" src="~/images/loading.gif">
                            <div class="caption">
                                <h3 id="recommendName">计算中</h3>
                                <p id="recommendContent">...</p>
                                <p><a id="recommendHref" href="#" class="btn btn-primary" role="button">立即前往</a> <a href="/Home/Recommend3" class="btn btn-default" role="button">重新推荐</a></p>
                            </div>
                        </div>
                </div>
                <ul class="list-group">
                    <li class="list-group-item active">
                        各个村落推荐指数一览：

                    </li>
                    <li class="list-group-item" >
                        <div style=" float:left;margin-right:10px"><p id="p0"></p></div><a id="a0" style="height:21px;float:right;padding-top:0" href="#" class="btn btn-primary" role="button">立即前往</a>
                        <div class="progress" width="100px">
                            <div id="n0" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 55%">
                                
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div style=" float:left;margin-right:10px"><p id="p1"></p></div><a id="a1"style="height:21px;float:right;padding-top:0" href="#" class="btn btn-primary" role="button">立即前往</a>
                        <div class="progress" width="100px">
                            <div id="n1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 35%">
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div style=" float:left;margin-right:10px"><p id="p2"></p></div><a id="a2" style="height:21px;float:right;padding-top:0" href="#" class="btn btn-primary" role="button">立即前往</a>
                        <div class="progress" width="100px">
                            <div id="n2" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 25%">
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div style=" float:left;margin-right:10px"><p id="p3"></p></div><a id="a3"style="height:21px;float:right;padding-top:0" href="#" class="btn btn-primary" role="button">立即前往</a>
                        <div class="progress" width="100px">
                            <div id="n3" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 15%">
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div style=" float:left;margin-right:10px"><p id="p4"></p></div><a id="a4"style="height:21px;float:right;padding-top:0" href="#" class="btn btn-primary" role="button">立即前往</a>
                        <div class="progress" width="100px">
                            <div id="n4" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 15%">
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div style=" float:left;margin-right:10px"><p id="p5"></p></div><a id="a5"style="height:21px;float:right;padding-top:0" href="#" class="btn btn-primary" role="button">立即前往</a>
                        <div class="progress" width="100px">
                            <div id="n5" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 15%">
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div style=" float:left;margin-right:10px"><p id="p6"></p></div><a id="a6"style="height:21px;float:right;padding-top:0" href="#" class="btn btn-primary" role="button">立即前往</a>
                        <div class="progress" width="100px">
                            <div id="n6" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;width: 15%">
                            </div>
                        </div>
                    </li>
                </ul>




            </div>
            @*<div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">否</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="itemdel()">我确定</button>
            </div>*@
        </div>
    </div>
    </div >




</body>

</html>
<script src="/js/mui.min.js"></script>
<script>
   
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    var page = 0
    var c1 = false
    var c2 = false
    var c3 = false
    var c4 = false
    var c5 = false

    var arry = new Array()
    function choose(num) {

        if ($("#" + num).hasClass("mui-icon-checkmarkempty")) {
            $("#" + num).removeClass("mui-icon-checkmarkempty")
            $("#" + num).css("color", "#000000")
            switch (num) {
                case 'c1':
                    c1 = false
                    break;
                case 'c2':
                    c2 = false
                    break;
                case 'c3':
                    c3 = false
                    break;
                case 'c4':
                    c4 = false
                    break;
                case 'c5':
                    c5 = false
                    break;
            }
        }
        else {
            $("#" + num).addClass("mui-icon-checkmarkempty")
            $("#" + num).css("color", "#22ac38")
            switch (num) {
                case 'c1':
                    c1 = true
                    break;
                case 'c2':
                    c2 = true
                    break;
                case 'c3':
                    c3 = true
                    break;
                case 'c4':
                    c4 = true
                    break;
                case 'c5':
                    c5 = true
                    break;
            }
        }
    }

    ///冒泡排序算法排序预测结果
    function bubbleSort(array,array2,array3) {
        const length = array.length;
        for (let i = 0; i < length; i++) {
            for (let j = 0; j < length - 1 - i; j++) {
                if (array[j] > array[j + 1]) {
                    let temp = array[j + 1];
                    array[j + 1] = array[j];
                    array[j] = temp;

                    let temp2 = array2[j + 1];
                    array2[j + 1] = array2[j];
                    array2[j] = temp2;

                    let temp3 = array3[j + 1];
                    array3[j + 1] = array3[j];
                    array3[j] = temp3;
                }
            }
        }
        return array;
    }
    function btnClick() {
       // $('#mymodal').modal();
        if (c1 == false && c2 == false && c3 == false && c4 == false && c5 == false) {
            alert("请做出选择哦")
            return
        }
       
        arry[0 + page] = c1
        arry[1 + page] = c2
        arry[2 + page] = c3
        arry[3 + page] = c4
        arry[4 + page] = c5
        page = page + 5
        if (page == 20) {
            //var result
            //result += "您的选择依次为："
            //for (var i = 0; i < arry.length; i++) {
            //    result += "第" + i + "项为：" + arry[i] + "; "
            //}
            //alert(result)
            $('#mymodal').modal();
            var jsons = JSON.stringify({
                b: arry[0], c: arry[1], d: arry[2], e: arry[3], f: arry[4], g: arry[5], h: arry[6], i: arry[7], j: arry[8], k: arry[9], l: arry[10], m: arry[11], n: arry[12], o: arry[13], p: arry[14], q: arry[15], r: arry[16], s: arry[17], t: arry[18], u: arry[19] 
            });
            var xhr = new XMLHttpRequest;//创建一个 XMLHttpRequest 对象，XMLHttpRequest是实现ajax的基础
            xhr.open("POST", "/Home/VillageRecommend", true)//请求方式为"Post","/Home/Index"为服务器地址（在MVC这里就是控制器地址+方法名），true表示选择异步
            xhr.setRequestHeader("Content-type", "application/json")//设置请求参数类型
            xhr.send(jsons);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {//readyState 等于 4 且状态为 200 时，表示响应已就绪：
                    var jsonText = xhr.responseText;
                    var name
                    var obj = JSON.parse(jsonText)
                    var href = "https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU3MDUyMDM5Nw==&scene=126&bizpsid=0#wechat_redirect"
                    var content = ""
                    var imageSrc ="/images/loading.gif"
                    switch (obj.predictedValue) {
                        case "0":
                            name = "老周三村"
                            content ="老周三村隶属海南省白沙黎族自治县细水乡，位于松涛水库边，通过水路与外界交通，主要经济来源靠捕鱼，种橡胶。目前，村里还只能靠轮渡与外界沟通。该黎寨三面环山，面朝松涛水库，整个村子隐映在周边的竹林、胶海和热带雨林之中。"
                            href = "https://mp.weixin.qq.com/s/rJygVlFMnDv44KSKqkB9GQ"
                            imageSrc ="/images/老周三.jpg"
                            break
                        case "1":
                            name = "迈德村"
                            content = "海口市东海岸桂林洋经济开发区东面约三公里处，坐落着一个翰墨飘香的历史文化美丽乡村——迈德村。它是二千多年前的“宗圣”曾子第59代孙曾祖裔、曾祖贤兄弟的肇居村庄，始建于明朝正统年间，至今已有五百七十多年的历史。"
                            imageSrc = "/images/迈德村曾氏祖祠.JPEG"
                           
                            break
                        case "2":
                            name = "三卿村"
                            content ="三卿村建村历史可追溯到800多年前的宋代，三卿村的建筑九成以上保留了古石巷和古石屋;整个村庄由火山植被包裹住，这里无处不透着历史的厚重感，这里每一块石头，都是万年前火山爆发的见证者，村口那座建于1930年、曾经用于抵御日寇的碉楼——安华楼，是烽火岁月的见证。"
                            imageSrc = "/images/三卿福安楼.jpeg"
                            break
                        case "3":
                            name = "莲塘村"
                            content ="莲塘村位于海南省琼海市中原镇，是古乐会县城的所在地。她历史悠久，景色秀丽，碧水荷韵，人才辈出，历史上村内曾经出过9任知府，她踏着几百年节拍一直流变至今。莲塘村2016年被住建部选为中国传统村落。"
                            href ="https://mp.weixin.qq.com/s/QNjLwh8mJhI-EkATYpD5zQ"
                            imageSrc = "/images/琼海莲塘村.png"
                            break
                        case "4":
                            name = "王下乡"
                            content ="这里是雅加大岭和黎母岭两大山系环抱中的狭长的山谷盆地，因为关山远隔、道阻且长又被称为“海南的西藏”。"
                            imageSrc = "/images/昌江王下村.jpg"
                            break
                        case "5":
                            name = "荣堂村"
                            content ="荣堂村始建于明代，是一个历史超过800年的古老村落，位于海南省海口市秀英区石山镇火山地质公园旁边。海口石山火山群是中国为数不多的全新世（距今约一万年）火山喷发活动的休眠山群之一。荣堂村的当地人感恩自然的馈赠，靠山吃山、就地取材，根据火山石的形状修筑房屋、道路、墙壁、墓地等，在此生息繁衍。"
                            href ="https://mp.weixin.qq.com/s/Ph5Ro-INgHOkW0jHujmNQw"
                            imageSrc = "/images/荣堂村.JPEG"
                            break
                        case "6":
                            name = "保平村"
                            content ="保平村历史悠久，文化深厚，明清古宅是崖州最有代表性、又最集中的古代民居建筑群。门楼、正室、横屋、正壁组成的生态庭园四合院，是保平村古民居最具建筑艺术和布局特色的乡村古建筑。这些古民居世代记录和标示着保平的建村史，见证了保平村的兴盛繁荣。"
                            imageSrc = "/images/三亚保平村.jpg"
                            break
                        default:
                            console.log(jsonText)
                            return;
                    }
                    $("#recommendName").html(name)
                    $("#recommendContent").html(content)
                    $("#recommendHref").attr("href", href)
                    $("#recommendImg").attr("src", imageSrc)
                    $("body").append("");
                    var arr1 = [obj.predictedProbability0, obj.predictedProbability1, obj.predictedProbability2, obj.predictedProbability3, obj.predictedProbability4, obj.predictedProbability5, obj.predictedProbability6]
                    var arr2 = ["老周三村", "迈德村", "三卿村", "莲塘村", "王下乡", "荣堂村", "保平村"]
                    var arr_h = ["https://mp.weixin.qq.com/s/rJygVlFMnDv44KSKqkB9GQ", href, href, "https://mp.weixin.qq.com/s/QNjLwh8mJhI-EkATYpD5zQ", href, "https://mp.weixin.qq.com/s/QNjLwh8mJhI-EkATYpD5zQ", href, "https://mp.weixin.qq.com/s/Ph5Ro-INgHOkW0jHujmNQw", href]

                    var arr_p = ["p6", "p5", "p4", "p3", "p2", "p1", "p0"]
                    var arr_n = ["n6", "n5", "n4", "n3", "n2", "n1", "n0"]
                    var arr_a = ["a6", "a5", "a4", "a3", "a2", "a1", "a0"]
                    bubbleSort(arr1, arr2,arr_h)//冒泡排序
                    for (j = 0; j < arr1.length; j++) {//插入推荐数据
                        $("#" + arr_p[j]).append(arr2[j])
                        $("#" + arr_n[j]).append(arr1[j] * 100 + "%")
                        $("#" + arr_n[j]).css("width", arr1[j] * 100 + "%")
                        $("#" + arr_a[j]).attr("href",arr_h[j])
                    } 
                   
                   // alert(arr1+"\n"+arr2+"\n"+name)
                    
                   // alert("推荐结果：" + name + "\n老周三村推荐指数：" + obj.predictedProbability0 + "\n迈德村推荐指数：" + obj.predictedProbability1 + "\n三卿村推荐指数：" + obj.predictedProbability2 + "\n莲塘村推荐指数：" + obj.predictedProbability3 + "\n王下乡推荐指数：" + obj.predictedProbability4 + "\n荣堂村推荐指数：" + obj.predictedProbability5 + "\n保平村推荐指数：" + obj.predictedProbability6)
                    //alert("多谢试用")
            // window.location.href = "/Home/Recommend3";
                }
            }
        }
        c1 = false
        c2 = false
        c3 = false
        c4 = false
        c5 = false
        $("#c1").removeClass("mui-icon-checkmarkempty")
        $("#c1").css("color", "#000000")
        $("#c2").removeClass("mui-icon-checkmarkempty")
        $("#c2").css("color", "#000000")
        $("#c3").removeClass("mui-icon-checkmarkempty")
        $("#c3").css("color", "#000000")
        $("#c4").removeClass("mui-icon-checkmarkempty")
        $("#c4").css("color", "#000000")
        $("#c5").removeClass("mui-icon-checkmarkempty")
        $("#c5").css("color", "#000000")
        switch (page) {
            case 5:
                $("#headContent").text("请选择出游人群:")
                $("#c1").html("夕阳红")
                $("#m1").attr("src", "/images/夕阳红.jpg")
                $("#c2").html("情侣")
                $("#m2").attr("src", "/images/情侣.jpg")
                $("#c3").html("朋友")
                $("#m3").attr("src", "/images/朋友.jpg")
                $("#c4").html("亲子")
                $("#m4").attr("src", "/images/亲子.jpg")
                $("#c5").html("Solo")
                $("#m5").attr("src", "/images/Solo.jpg")
                break;
            case 10:
                $("#headContent").text("请选择偏好项目:")
                $("#c1").html("民俗")
                $("#m1").attr("src", "/images/民俗.jpg")
                $("#c2").html("自然")
                $("#m2").attr("src", "/images/自然.jpg")
                $("#c3").html("康养")
                $("#m3").attr("src", "/images/康养.jpg")
                $("#c4").html("古宅")
                $("#m4").attr("src", "/images/古宅.jpg")
                $("#c5").html("红色")
                $("#m5").attr("src", "/images/红色.jpg")
                break;
            case 15:
                $("#headContent").text("请选择偏好项目:")
                $("#m1").attr("src", "/images/探险.jpg")
                $("#m2").attr("src", "/images/采摘.jpg")
                $("#m3").attr("src", "/images/传统技艺.jpg")
                $("#m4").attr("src", "/images/赏花.jpeg")
                $("#m5").attr("src", "/images/荒野探索.jpg")
                $("#c1").html("探险")
                $("#c2").html("采摘")
                $("#c3").html("传统技艺")
                $("#c4").html("赏花")
                $("#c5").html("荒野探索")
                break;
        }
     
    }
</script>